<template>
    <Row :gutter="30">
        <Card style="margin:0 0 20px 0px">
            <Row class="form-row">
                <Form label-position="right" :label-width="90" inline>
                    <FormItem label="快递员名称">
                        <div class="filters-input">
                            <Input type="text" placeholder="快递员名称" v-model="name"/>
                        </div>
                    </FormItem>
                    <FormItem label="快递公司">
                        <div class="filters-input">
                            <el-select :clearable="true" v-model="valueComany" placeholder="请选择快递公司">
                                <el-option v-for="item in optionsCompany" :key="item.id" :label="item.name"
                                           :value="item.id">
                                </el-option>
                            </el-select>
                        </div>
                    </FormItem>
                    <FormItem label="快递员电话">
                        <div class="filters-input">
                            <Input placeholder="快递员电话" v-model="phone"/>
                        </div>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" size="large" icon="md-search" @click="loadData()">
                            查询
                        </Button>
                    </FormItem>
                </Form>
            </Row>
            <Table ref="table" border :data="tableData" :columns="columns">
                <!-- 操作 -->
                <template slot="action" slot-scope="props"  align="center" width="150px">

                    <Poptip confirm title="确定注销?" transfer @on-ok="handleDelete(props.id)" style="margin-right:5px;">
                        <Button :disabled="props.status==1||props.status==-1" type="primary" size="small">通过</Button>
                    </Poptip>
                    <Button type="warning" @click="handleAdd(props.id)" size="small">账户明细</Button>
                </template>
            </Table>
            <Page style="margin: 10px 0;" :total="pageTotal" :current="pageNum" :page-size="pageSize" show-total
                  show-sizer show-elevator @on-change="handlePage" @on-page-size-change='handlePageSize'>
            </Page>
        </Card>

        <Modal v-model="formVisible" class="modal-content" width="40%" :title="modalName">
            <Row :gutter="20" style="background:#f8f8f9;padding:20px">
                <Table ref="tableModal" border :data="tableModal" :columns="columnsModal">

                </Table>
                <Page style="margin: 10px 0;" :total="pageModalTotal" :current="pageModalNum" :page-size="pageModalSize"
                      show-total show-sizer show-elevator @on-change="handleModalPage"
                      @on-page-size-change='handleModalPageSize'>
                </Page>
            </Row>
            <div slot="footer">
                <Button type="text" size="large" @click="onCancel">取消</Button>
            </div>
        </Modal>
    </Row>

</template>
<script>
    let personId = 0;
    export default {
        data() {
            //收件表格
            return {
                modalName: "",
                //数据表格隐藏那个状态
                tableLoading: false,
                //对话框隐藏状态
                formVisible: false,
                //表单提交状态
                formLoading: false,
                optionsCompany: [],
                valueComany: '',
                name: "",
                company: "",
                phone: "",
                //页码
                pageNum: 1,
                //每页数量
                pageSize: 10,
                //总数
                pageTotal: 0,
                //页码
                pageModalNum: 1,
                //每页数量
                pageModalSize: 5,
                //总数
                pageModalTotal: 0,
                tableData: [],
                tableModal: [],
                columns: [
                    {
                        title: "快递员名称",
                        key: "name"
                    },
                    {
                        title: "支付宝用户id",
                        key: "userId"
                    },
                    {
                        title: "快递公司",
                        key: "parentId",
                        render: (h, params) => {
                            let label = "其他";
                            this.optionsCompany.map(item => {
                                if (item.id == params.row.parentId) {
                                    label = item.name;
                                }
                            });
                            return h("span", label);
                        }
                    },
                    {
                        title: "快递员电话",
                        key: "phone"
                    },
                    {
                        title: "支付宝账号",
                        key: "alipayNo"
                    },
                    {
                        title: "账户余额",
                        sortable: true,
                        key: "remainder"
                    },
                    {
                        title: "创建时间",
                        sortable: true,
                        key: "createTime"
                    },
                    {
                        title: "状态",
                        key: "status",
                        render: (h, params) => {
                            let label = "启用";
                            if (params.row.status == -1) {
                                label = "注销";
                                return h("span", {style: {color: "green"}}, label);
                            } else if (params.row.status == 0) {
                                label = "申请注销";
                                return h("span", {style: {color: "red"}}, label);
                            } else {
                                return h("span", label);
                            }
                        }
                    },
                    {
                        key: "action",
                        title: "操作",
                        align: "center",
                        width: 150,
                        render: (h, params) => {
                            return h(
                                "div",
                                this.$refs.table.$scopedSlots.action({
                                    status: params.row.status,
                                    id: params.row.id,
                                    name: params.row.name
                                })
                            );
                        }
                    }
                ],
                columnsModal: [
                    {
                        title: "金额",
                        key: "amount"
                    },
                    {
                        title: "描述",
                        key: "description"
                    },
                    {
                        title: "快递单号",
                        key: "code"
                    },
                    {
                        title: "时间",
                        key: "createTime"
                    }
                ]
            };
        },
        created: function () {
            this.postRequest("/api/kdCompany/kdCompanyList").then(res => {
                this.optionsCompany = res.data;
            });
            let params = {};
            params.pageNum = this.pageNum;
            params.pageSize = this.pageSize;
            this.postRequest("/api/kdCompany/queryKdEmployee", params).then(res => {
                this.tableData = res.data.list;
                this.pageTotal = res.data.total;
            });
        },
        methods: {
            // 根据部门id获取发件数据
            handleDelete(id) {
                this.getRequest("/api/kdCompany/delectKdEmp?id=" + id).then(res => {
                    this.tableLoading = false;
                    console.log(res)
                    if (res.code == 20000) {
                        this.$Message.success("同意注销成功!");
                        this.pageNum = 1;
                        this.loadData();
                    } else {
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });
            },
            handleAdd(id) {
                personId = id;
                let params = {};
                params.id = id;
                params.pageNum = this.pageModalNum;
                params.pageSize = this.pageModalSize;
                this.postRequest("/api/kdCompany/queryCapitalByKdEmp", params).then(
                    res => {
                        if (res.data.list.length != 0) {
                            this.modalName = res.data.list[0].name;
                            this.modal = {};
                            this.tableModal = res.data.list;
                            this.pageModalTotal = res.data.total;
                            this.formVisible = true;
                        } else {
                            this.$Message.error("暂无该账户明细!");
                        }
                    }
                );
            },
            loadData() {
                let params = {};
                params.name = this.name;
                params.parentId = this.valueComany;
                params.phone = this.phone;
                params.pageNum = this.pageNum;
                params.pageSize = this.pageSize;
                this.postRequest("/api/kdCompany/queryBycondition", params).then(res => {
                    this.tableData = res;
                });
            },
            onCancel() {
                this.formLoading = false;
                this.formVisible = false;
            },
            handleModalPage(value) {
                this.pageModalNum = value;
                this.handleAdd(personId);
            },
            handleModalPageSize(value) {
                this.pageModalNum = value;
                this.handleAdd(personId);
            },
            handlePageSize(value) {
                this.pageSize = value;
                this.loadData();
            },
            handlePage(value) {
                this.pageNum = value;
                this.loadData();
            }
        }
    };
</script>
